<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="金融/保险服务"></Breadcrumb>

    <h1 class="page-title">金融/保险服务</h1>

    <p class="page-subtitle">专业金融与保险解决方案，助力企业稳健发展和风险防控</p>

    <div class="overview-section">
      <div class="overview-content">
        <div class="overview-text">
          <h2>金融与保险服务概述</h2>
          <p>创新服务平台整合优质金融与保险资源，为企业提供全方位的金融解决方案和风险管理服务。我们与多家银行、保险公司和投资机构建立了战略合作关系，能够为企业提供定制化的金融与保险服务。</p>
          <p>金融服务涵盖企业融资、投资管理、财务顾问等多个领域；保险服务包括财产保险、责任保险、员工福利保险等全方位保障。我们的专业团队拥有丰富的行业经验，能够根据企业实际情况，设计最优的金融与保险方案。</p>
          <p>平台已服务超过500家企业，累计促成金融交易金额超过50亿元，保险保障金额超过100亿元，客户满意度达98%。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="金融保险服务" class="overview-image">
      </div>
    </div>

    <div class="finance-section">
      <h2 class="section-title">金融服务</h2>
      <p>全方位的金融解决方案，满足企业不同发展阶段的资金需求</p>

      <div class="finance-list">
        <div class="finance-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="企业融资" class="finance-image">
          <div class="finance-content">
            <h3>企业融资服务</h3>
            <p>我们与多家银行和非银行金融机构合作，为企业提供多样化的融资解决方案，包括银行贷款、债券发行、融资租赁、供应链金融等。我们的专业团队将根据企业实际情况，设计最优融资方案，帮助企业降低融资成本，提高融资效率。
            </p>
            <p>服务特点：多渠道融资对接、个性化方案设计、全程专业指导</p>
            <p>适用场景：企业扩张、设备采购、流动资金补充、项目投资等</p>
          </div>
        </div>

        <div class="finance-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="投资管理" class="finance-image">
          <div class="finance-content">
            <h3>投资管理服务</h3>
            <p>提供专业的投资管理和财务顾问服务，包括投资项目评估、投资组合管理、财务规划等。我们的投资专家团队拥有丰富的市场经验，能够帮助企业制定科学的投资策略，实现资产保值增值。</p>
            <p>服务特点：专业投资分析、风险控制、资产配置优化</p>
            <p>适用场景：企业闲置资金管理、战略投资、并购重组等</p>
          </div>
        </div>

        <div class="finance-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="财务顾问" class="finance-image">
          <div class="finance-content">
            <h3>财务顾问服务</h3>
            <p>为企业提供全面的财务顾问服务，包括财务战略规划、资本结构优化、税务筹划等。我们的财务专家将深入分析企业财务状况，提供专业建议，帮助企业提升财务管理水平，实现财务目标。</p>
            <p>服务特点：全方位财务诊断、定制化解决方案、持续跟踪服务</p>
            <p>适用场景：企业战略规划、上市准备、财务体系优化等</p>
          </div>
        </div>
      </div>
    </div>

    <div class="insurance-section">
      <h2 class="section-title">保险服务</h2>
      <p>全面的风险保障方案，为企业稳健发展保驾护航</p>

      <div class="insurance-grid">
        <div class="insurance-card">
          <div class="service-icon">🏢</div>
          <h3>财产保险</h3>
          <p>为企业财产提供全方位保障，包括火灾保险、自然灾害保险、机器损坏保险等，覆盖企业固定资产、存货、设备等各类财产风险。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>

        <div class="insurance-card">
          <div class="service-icon">👨‍💼</div>
          <h3>责任保险</h3>
          <p>保障企业因经营活动可能产生的法律责任风险，包括公众责任险、产品责任险、雇主责任险、职业责任险等。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>

        <div class="insurance-card">
          <div class="service-icon">👥</div>
          <h3>员工福利保险</h3>
          <p>为企业员工提供全面的福利保障，包括团体健康保险、意外伤害保险、养老保险等，提升员工福利，增强企业吸引力。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>

        <div class="insurance-card">
          <div class="service-icon">✈️</div>
          <h3>贸易信用保险</h3>
          <p>保障企业在贸易往来中的信用风险，包括买方破产、拖欠货款等风险，帮助企业安全开展贸易活动。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>

        <div class="insurance-card">
          <div class="service-icon">🛡️</div>
          <h3>网络安全保险</h3>
          <p>保障企业因网络攻击、数据泄露等网络安全事件导致的损失，包括数据恢复费用、法律责任赔偿等。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>

        <div class="insurance-card">
          <div class="service-icon">📦</div>
          <h3>物流运输保险</h3>
          <p>保障企业在货物运输过程中的风险，包括货物损失、运输工具损坏等，覆盖海运、陆运、空运等多种运输方式。</p>
          <a href="javascript:;">了解详情 →</a>
        </div>
      </div>
    </div>


    <div class="partner-section">
      <h2 class="section-title">合作伙伴</h2>
      <p>我们与多家知名金融机构和保险公司建立了战略合作关系</p>

      <div class="partner-list">
        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="工商银行" class="partner-logo">
        </div>

        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="建设银行" class="partner-logo">
        </div>

        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="中国银行" class="partner-logo">
        </div>

        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="平安保险" class="partner-logo">
        </div>

        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="中国人保" class="partner-logo">
        </div>

        <div class="partner-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="太平洋保险" class="partner-logo">
        </div>
      </div>
    </div>

    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了优质的金融与保险服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="科技企业融资" class="case-image">
          <div class="case-content">
            <h4>某科技企业融资服务</h4>
            <p>为该科技企业设计融资方案，成功获得1亿元银行贷款，利率低于市场平均水平，支持企业研发投入和市场拓展。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="制造企业保险" class="case-image">
          <div class="case-content">
            <h4>制造企业综合保险方案</h4>
            <p>为制造企业设计全方位保险方案，涵盖财产险、责任险和员工福利险，年保费节省20%，保障范围扩大30%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="贸易企业信用保险" class="case-image">
          <div class="case-content">
            <h4>贸易企业信用保险服务</h4>
            <p>为贸易企业提供信用保险服务，保障金额5000万元，帮助企业安全拓展国际市场，降低应收账款风险。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>



    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 服务概览 */
.overview-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.overview-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.overview-text {
  flex: 1;
}

.overview-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.overview-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.overview-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务内容 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 服务网格 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.service-card a:hover {
  background-color: #207cca;
}

/* 金融服务 */
.finance-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.finance-list {
  margin-top: 30px;
}

.finance-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e0e9ff;
}

.finance-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.finance-content {
  flex: 1;
}

.finance-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.finance-content p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

/* 保险服务 */
.insurance-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.insurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.insurance-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.insurance-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.insurance-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #1e5799;
}

.insurance-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.insurance-card a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

/* 合作伙伴 */
.partner-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.partner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.partner-item {
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.partner-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 成功案例 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}



</style>